
	<!DOCTYPE html>
	<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>hello_react</title>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.development.js"></script>
		<!-- 引入react-dom，用于支撑react操作DOM-->
		<script type="text/javascript" src="../js/react-dom.development.js"></script>
		<!-- 引入babel，用于将jsx转为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
	</head>

	<body>
		<!-- 准备好一个容器 -->
		<div id="test"></div>
		<div id="demo"></div>

	<script type="text/babel">/* 此处必须写成babel */
		// 变量
		const id_bian = "id_Yuge"
		const conent_bian = "框架"
		const conent_vdom3 = ["vue","react","augla"]
		//1.创建一个虚拟DOM  
		let VDOM = <h1>Hello,React</h1> //此处一定不要加引号，因为不是字符串，是虚拟DOM
		// jsx语法
		const VDOM2 = (
			<div>
				<h1 className="title" id={id_bian.toLowerCase()}>
					<span style={{color:'red',fontSize:'50px'}}>{conent_bian.toLowerCase()}</span>
				</h1>
				<input type="text"/>
			</div>
		)
		// 框架jsx
		const VDOM3 = (
			<div>
				<h1 className="title" id={id_bian.toLowerCase()}>
					<span style={{color:'red',fontSize:'50px'}}>{conent_bian.toLowerCase()}</span>
				</h1>
				<ul>
					{conent_vdom3.map((ele,index)=>{
						return <li key = {index}>{ele}</li>
					})}
				</ul>
			</div>
		)
		//2.让React将虚拟DOM——VDOM转为真实DOM，渲染到页面
		ReactDOM.render(VDOM3, document.getElementById('test')) //这行代码，不是追加的动作，而是替换的动作
		
		console.log('虚拟', VDOM);
		console.log('真实', document.getElementById("demo"));
		// debugger
	</script>
	</body>
	<style>
		.title{
			background-color: aqua;
		}
	</style>

	</html>
